<template>
  <div class="app-container" style="font-family: '微软雅黑'">
    <!-- {{ $route.params.salonid }} - {{ $route.query.scode }} -->
    <div style="width: 100%; height: 50px">
      <img src="@/assets/images/salon_title.png" height="100%">
    </div>
    <div
      style="
        position: absolute;
        width: 54px;
        height: 60px;
        top: 0px;
        right: 30px;
      "
    >
      <img src="@/assets/images/diag_txs_logo.png" height="100%">
    </div>

    <pre
      style="
        margin: 0;
        width: 100%;
        height: 20px;
        background-color: #d14649;
        font-family: '微软雅黑';
        font-size: small;
        line-height: 20px;
      "
    >  S T O R E    P R O F I T    S Y S T E M</pre>

    <p style="font-size: 30px; margin-top: 10px;margin-bottom: 10px;text-align: center;color:#409EFF;">
      {{ salonObj.sname }}
    </p>

    <div class="sheet-content">
      <el-row :gutter="0">
        <el-col :span="4">编号：</el-col>
        <el-col :span="8">{{ salonObj.code }}</el-col>
        <el-col :span="4">地址：</el-col>
        <el-col :span="8">{{ salonObj.address }}</el-col>
      </el-row>
    </div>

    <div style="background-color: #4874CB; color: #fff; font-size: larger;padding: 20px;">
      <el-row :gutter="0" style="margin-bottom: 10px;">
        <el-col :span="2" :offset="0" style="font-weight: bolder;font-size: 20px;">门店综</el-col>
        <el-col :span="2" :offset="0" style="font-weight: bolder;">合作条款：</el-col>
        <el-col :span="9" :offset="0">{{ salonObj.terms }}</el-col>
        <el-col :span="2" :offset="0" style="font-weight: bolder;">履约周期：</el-col>
        <el-col :span="9" :offset="0">{{ salonObj.period }}</el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="2" :offset="0" style="font-weight: bolder;font-size: 20px;">合信息</el-col>
        <el-col :span="2" :offset="0" style="font-weight: bolder;">问题：</el-col>
        <el-col :span="9" :offset="0" style="white-space: pre-wrap;">{{ salonObj.problem }}</el-col>
        <el-col :span="2" :offset="0" style="font-weight: bolder;">解决方案：</el-col>
        <el-col :span="9" :offset="0" style="white-space: pre-wrap;">{{ salonObj.solution }}</el-col>
      </el-row>
    </div>

    <!-- <div style="line-height: 40px;">
      <el-checkbox-group v-model="checkList">
        <el-checkbox label="1">【生美】美睫美甲纹绣</el-checkbox>
        <el-checkbox label="2">【生美】面（头）部类</el-checkbox>
        <el-checkbox label="3">【生美】身体类</el-checkbox>
        <el-checkbox label="4">【生美】中医养生类</el-checkbox>
        <el-checkbox label="5">【生美】大健康类</el-checkbox>
        <el-checkbox label="6">【轻医美机构】</el-checkbox>
        <el-checkbox label="7">【综合医美机构】</el-checkbox>
        <el-checkbox label="8">【异业】服务女性的非美业</el-checkbox>
        <el-checkbox label="9">其他</el-checkbox>
      </el-checkbox-group>
    </div> -->

    <!-- <div class="sheet-content">
      <el-row :gutter="0">
        <el-col :span="2">面积㎡：</el-col>
        <el-col :span="5">{{ salonObj.area }}</el-col>
        <el-col :span="2">人数：</el-col>
        <el-col :span="9">{{ salonObj.cnumber }}</el-col>
        <el-col :span="3">开发者：</el-col>
        <el-col :span="3">{{ salonObj.developer }}</el-col>
      </el-row>
    </div> -->

    <div style="font-size: larger;padding: 20px;background-color: #d14649;color: #fff;">
      <el-row :gutter="0" style="margin-bottom: 20px;">
        <el-col :span="2" :offset="0" style="font-weight: bolder;font-size: 20px;">股东</el-col>
        <el-col :span="22" :offset="0" style="text-align: center;">
          <el-link
            v-for="(item, index) in listBoss"
            :key="index"
            :href="'/#/show/clerk/' + item.id + '?ccode='+ item.ccode"
            target="_blank"
            type="primary"
            style="font-size: 20px;margin-right: 30px;color: #fff;"
          >{{ item.cname }}</el-link>
        </el-col>
      </el-row>

      <el-row :gutter="0" style="margin-bottom: 20px;">
        <el-col :span="2" :offset="0" style="font-weight: bolder;font-size: 20px;">员工</el-col>
        <el-col :span="22" :offset="0" style="text-align: center;">
          <el-link
            v-for="(item, index) in listClerk"
            :key="index"
            :href="'/#/show/clerk/' + item.id + '?ccode='+ item.ccode"
            target="_blank"
            type="primary"
            style="font-size: 20px;margin-right: 30px;color: #fff;"
          >{{ item.cname }}</el-link>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="2" :offset="0" style="font-weight: bolder;font-size: 20px;">客户</el-col>
        <el-col :span="22" :offset="0" style="text-align: center;">
          <el-link
            v-for="(item, index) in listGuest"
            :key="index"
            :href="'/#/show/clerk/' + item.id + '?ccode='+ item.ccode"
            target="_blank"
            type="primary"
            style="font-size: 20px;margin-right: 30px;color: #fff;"
          >{{ item.cname }}</el-link>
        </el-col>
      </el-row>

    </div>

    <div class="sheet-content" style="background-color: #fff;">
      <div>跟进信息</div>
      <p v-html="salonObj.track" />
    </div>
  </div>
</template>

<script>
import { getShopClerks, getSalon } from '@/api/txs'

export default {
  data () {
    return {
      listBoss: [],
      listClerk: [],
      listGuest: [],
      checkList: [],
      list: [],
      salonObj: {
        sname: ''
      }
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      getSalon(this.$route.params.salonid)
        .then(res => {
          this.salonObj = res.data.data
          this.checkList = this.salonObj.stype.split(' ')
          loading.close()
        })
        .catch(() => {
          this.$alert('获取信息故障，请联系管理员！', '服务器错误', {
            type: 'error',
            confirmButtonText: '确定'
          })
        })
      getShopClerks(this.$route.params.salonid).then(res => {
        this.list = res.data.data
        this.list.forEach(c => {
          if (c.post === '老板') {
            this.listBoss.push(c)
          } else if (c.post === '客户') {
            this.listGuest.push(c)
          } else {
            this.listClerk.push(c)
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.sheet-content {
  // margin-right: 30px;
  line-height: 30px;
  background-color: #f2f2f2;
  font-size: larger;
  font-weight: bold;
  padding: 20px;
  // margin-bottom: 20px;
  .el-col {
    border:1px solid transparent;
  }
}
</style>
